<template>
  <div class="detail-container">
    <div class="detail-main">
      <div class="detail-block">
        <div class="detail">
          <div class="detail__header">
            <div class="detail__userInfo">
              <nuxt-link :to="'/user/' + authorInfo.uid" class="detail__user__avatar" target="_blank">
                <user-avatar :url="articInfo.user.avatarLarge" :round="true"></user-avatar>
              </nuxt-link>
              <nuxt-link :to="'/user/' + authorInfo.uid" class="detail__user__name" target="_blank">
                <span style="margin-right: 10px">{{ articInfo.user.username }}</span>
                <level :level="articInfo.user.level"></level>
              </nuxt-link>
              <div class="detail__user__meta">
                <span class="meta__time">{{ articInfo.create_date }}</span>
                <span>阅读{{ articInfo.viewsCount }}</span>
              </div>
            </div>
            <follow-btn :is-follow.sync="isFollowed" type="user" :followee-id="authorInfo.uid"></follow-btn>
          </div>
          <div v-if="articInfo.screenshot" class="detail__cover" :style="`background-image: url(${articInfo.screenshot})`"></div>
          <h1 class="detail__title">{{ articInfo.title }}</h1>
          <div class="detail__content" v-html="articDetail.content"></div>
        </div>
        <div class="tags">
          <p class="tags__title">关注下面的标签，发现更多相似文章</p>
          <nuxt-link :to="'/tag?name='+item.title" v-for="item in articInfo.tags" :key="item.id" class="tag" target="_blank">
            <img :src="item.icon" class="tag__icon">
            <span class="tag__title">{{ item.title }}</span>
          </nuxt-link>
        </div>

        <nuxt-link :to="'/user/' + authorInfo.uid" v-if="authorInfo" class="author-info" target="_blank">
          <div class="author__avatar">
            <user-avatar :url="authorInfo.avatarLarge" :round="true"></user-avatar>
          </div>
          <div class="author-info__main">
            <div>
              <span class="author__name">{{ authorInfo.username }}</span>
              <level :level="authorInfo.level"></level>
              <span>
                {{ authorInfo.jobTitle }}
                {{ authorInfo.jobTitle && authorInfo.company ? ' @ ' : '' }}
                {{ authorInfo.company }}
              </span>
            </div>
            <div>
              <span>发布了 {{ authorInfo.postedPostsCount }} 篇专栏 · </span>
              <span>获取点赞 {{ authorInfo.totalCollectionsCount }} · </span>
              <span>获取阅读 {{ authorInfo.totalViewsCount }}</span>
            </div>
          </div>
        </nuxt-link>
        <div class="comment-area">
          <p class="comment-area__title">评论</p>
          <div style="padding-left: 50px">
            <comment-item v-for="(item, index) in comments" :key="item.id" :index="index" :author-id="authorInfo.uid" :data="item" @reply-more="getMoreReply"></comment-item>
            <div v-if="hasComments" class="comment__more-btn" @click="getMoreComment">查看更多</div>
          </div>
        </div>
      </div>
      <div class="detail-recommend">
        <div class="recommend-title">相关推荐</div>
        <artic-list :list="recommendArticles"></artic-list>
      </div>
    </div>
    <div class="detail-side">
      <about-author :info="authorInfo"></about-author>
      <about-article :list="aboutArticles"></about-article>
      <catalog></catalog>
    </div>

    <article-suspended-panel ref="panel" :like-count="articInfo.collectionCount" :comment-count="articInfo.commentsCount" :is-like="isLike" @setgood-handler="setGood"></article-suspended-panel>
  </div>
</template>

<script>
  import reachBottom from "../../mixins/reachBottom";
  import commonRequest from "../../mixins/commonRequest";
  import ArticList from "../../components/common/articList";
  import AboutAuthor from "../../components/business/detail/aboutAuthor";
  import AboutArticle from "../../components/business/detail/aboutArticle";
  import ArticleSuspendedPanel from "../../components/business/detail/articleSuspendedPanel";
  import catalog from "../../components/business/detail/catalog";

  export default {
    async asyncData({ app, params }) {
      const articDetail = await app.$api.getDetail({
        type: 'entryView',
        postId: params.id
      }).then(res => res.s === 1 ? res.d : {})
      // 文章信息
      const articInfo = await app.$api.getDetail({
        type: 'entry',
        postId: params.id
      }).then(res => {
        if (res.s === 1) {
          return {
            ...res.d,
            create_date: app.$utils.formatDate('Y年MM月DD日', res.d.createdAt)
          }
        }
        return {}
      })
      // 相关文章
      const aboutArticles = await app.$api.getRelatedEntry({
        limit: 5,
        entryId: articInfo.objectId
      }).then(res => res.s === 1 ? res.d : [])
      let authorInfo = null
      if (articInfo.user) {
        // 用户信息
        authorInfo = await app.$api.getMultiUser({
          ids: articInfo.user.objectId,
          cols: ''
        }).then(res => {
          if (res.s === 1) {
            return res.d[articInfo.user.objectId]
          }
        })
      }
      return {
        articDetail,
        articInfo,
        authorInfo,
        aboutArticles
      }
    },
    head() {
      return {
        title: this.articInfo.title,
        meta: [
          { hid: 'description', name: 'description', content: this.articInfo.content }
        ]
      }
    },
    validate({ params }) {
      if (params.id && params.id != 'undefined') {
        return true
      }
      return false
    },
    components: { ArticleSuspendedPanel, AboutArticle, AboutAuthor, ArticList, catalog },
    mixins: [reachBottom, commonRequest],
    data() {
      return {
        articDetail: {},
        articInfo: {},
        authorInfo: {},
        aboutArticles: [],
        recommendArticles: [],
        hasComments: true,
        tagIds: '',
        isFollowed: false,
        comments: [],
        isLike: false
      }
    },
    mounted() {
      this.$api.getRelatedEntry({
        limit: 5,
        entryId: this.articInfo.objectId
      })
      this.getCommentList({
        pageSize: 5
      })
      this.isCurrentUserFollowed(this.authorInfo.uid).then(res => (this.isFollowed = res))
      this.isArticleLike(this.articDetail.entryId).then(res => (this.isLike = res))
      if (this.articInfo.tags) {
        this.tagIds = this.articInfo.tags.map(item => item.id)
      }
      if (location.hash === "#comment") {
        this.$refs.panel.scrollIntoComment()
      }
    },
    methods: {
      reachBottom() {
        this.getRecommendEntryByTagIds()
      },
      getMoreComment() {
        this.getCommentList({
          pageSize: 20
        })
      },
      getCommentList({ pageSize }) {
        let last = this.comments.slice(-1)[0]
        let createdAt = last ? last.createdAt : ''
        this.$api.getCommentList({
          entryId: this.articDetail.entryId,
          rankType: 'new',
          createdAt,
          pageSize
        }).then(res => {
          if (res.s === 1) {
            this.commentCount = res.d.count
            this.comments = this.comments.concat(res.d.comments)
            if (res.d.comments.length === 0) {
              this.hasComments = false
            }
          }
        })
      },
      getRecommendEntryByTagIds() {
        let last = this.recommendArticles.slice(-1)[0]
        let before = last ? last.rankIndex : ''
        this.$api.getRecommendEntryByTagIds({
          tagIds: this.tagIds.join('|'),
          before
        }).then(res => {
          if (res.s === 1) {
            this.recommendArticles = this.recommendArticles.concat(res.d)
          }
        })
      },
      setGood() {
        if (!this.$store.state.auth.token) {
          this.$loginModal(this)
          return
        }
        this.$api.articleLike({
          isCollected: !this.isLike,
          entryId: this.articDetail.entryId
        }).then(res => {
          if (res.s === 1) {
            this.isLike = !this.isLike
            this.isLike ? this.articInfo.collectionCount++ : this.articInfo.collectionCount--
          }
        })
      },
      getMoreReply({ index, pageNum, pagesize }) {
        let comment = this.comments[index]
        this.$api.getReplyList({
          entryId: this.articDetail.entryId,
          commentId: comment.id,
          pageNum,
          pagesize
        }).then(res => {
          if (res.s === 1) {
            let data = pageNum == 1 ? res.d.comments : comment.topComment.concat(res.d.comments)
            this.$set(comment, 'topComment', data)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .detail-container {
    display: flex;

    .detail-main {
      width: 700px;
      margin-right: 20px;

      .detail-block {
        padding: 0 25px;
        background: #fff;
      }

      .detail-recommend {
        margin-top: 20px;
        background: #fff;

        .recommend-title {
          padding: 20px 25px;
          font-weight: bold;
          border-bottom: 1px solid #eee;
        }
      }
    }

    .detail-side {
      width: 240px;
    }
  }

  .detail {
    padding-top: 30px;
    border-radius: 2px;

    .detail__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
    }

    .detail__cover {
      width: 100%;
      padding-top: 50%;
      background-size: cover;
      background-position: 50%;
      margin-bottom: 30px;
    }

    .detail__title {
      margin-bottom: 50px;
      line-height: 1.6;
      font-size: 30px;
      font-weight: 700;
      color: #000;
    }

    .detail__content {
      line-height: 1.6;
      color: #333;

      /deep/ img {
        width: 100%;
      }

      /deep/ p {
        margin: 22px 0;
      }

      > code {
        background-color: rgb(255, 245, 245);
        color: rgb(255, 80, 44);
        font-size: 13px;
        padding: 1px 5px;
        border-radius: 2px;
        overflow-x: auto;
      }

      /deep/ h1 {
        margin-top: 40px;
        margin-bottom: 12px;
        font-size: 26px;
        font-weight: 700;
      }

      /deep/ h2 {
        margin-top: 24px;
        margin-bottom: 12px;
        font-size: 24px;
        font-weight: 700;
      }

      /deep/ h3 {
        margin-top: 15px;
        margin-bottom: 12px;
        font-size: 18px;
        font-weight: 700;
      }

      /deep/ h4 {
        margin-top: 15px;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 700;
      }

      /deep/ h5 {
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: 700;
      }

      /deep/ code {
        font-size: 13px;
        line-height: 1.8;
        letter-spacing: .6px;
      }

      /deep/ ol,
      /deep/ ul {
        padding-left: 28px;
        list-style: initial;
        list-style-type: decimal;
      }

      /deep/ li {
        padding-left: 6px;
        list-style: initial;
        list-style-type: decimal;
      }

      /deep/ blockquote {
        color: #666;
        padding: 1px 23px;
        margin: 22px 0;
        border-left: 4px solid #cbcbcb;
        background-color: #f8f8f8;
      }

      /deep/ a {
        color: #0269c8;
        border-bottom: 1px solid #d1e9ff;
        word-break: break-all;

        &:hover {
          color: #007fff;
        }

        &:active {
          color: #275b8c;
        }
      }

    }
  }

  .detail__userInfo {
    display: flex;
    height: 40px;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding-left: 50px;

    .detail__user__avatar {
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 40px;
      background: #f4f4f4;
      border-radius: 50%;
      cursor: pointer;
    }

    .detail__user__name {
      display: flex;
      align-items: center;
      font-weight: 700;
      color: #333;
      cursor: pointer;
    }

    .detail__user__meta {
      letter-spacing: 1px;
      font-size: 14px;
      color: #909090;

      .meta__time {
        margin-right: 10px;
      }
    }
  }

  .comment-area {
    padding: 20px 0;

    .comment-area__title {
      padding-bottom: 20px;
      color: #777;
      text-align: center;
    }

    .comment__more-btn {
      padding: 10px;
      text-align: center;
      font-size: 14px;
      color: #406599;
      cursor: pointer;

      &:hover {
        opacity: .8;
      }
    }
  }

  .tags {
    margin-top: 30px;

    .tags__title {
      padding-left: 20px;
      margin-bottom: 20px;
      font-weight: bolder;
      color: #333;
      font-size: 15px;
      border-left: 6px solid #ddd;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      margin: 0 20px 20px 0;
      padding: 2px;
      border: 1px solid #ddd;

      .tag__icon {
        width: 21px;
        height: 21px;
      }

      .tag__title {
        padding: 0 5px;
        font-size: 12px;
        color: #999;
      }

    }
  }

  .author-info {
    display: flex;
    padding: 15px;
    margin: 30px 0;
    background: #f4f4f4;
    cursor: pointer;

    .author__avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .author-info__main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 2px 0;
      color: #999;
      font-size: 14px;
      margin-left: 10px;

      .author__name {
        font-size: 16px;
        font-weight: bold;
        color: #262626;
      }
    }
  }
</style>
